<script setup>
//底部渲染
import { ref } from 'vue'
import ResultTable from '@/components/ResultTable.vue'
import { defineProps, defineEmits } from 'vue'
import DetailDrawer from './DetailDrawer.vue'
import TanKuang from './TanKuang.vue'
const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  /** 车辆id */
  truckId: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit', 'ok'])

// 表格数据 - 头部
const columns = ref([
  {
    title: '序号',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    customRender: ({ index }) => (props.page - 1) * props.pageSize + index + 1,
  },
  {
    title: '司机账号',
    dataIndex: 'account', // truckId
    key: 'account',
  },
  {
    title: '司机姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '司机电话',
    dataIndex: 'mobile',
    key: 'mobile',
    align: 'center',
  },
  {
    //？
    title: '关联车辆',
    dataIndex: ['truck', 'licensePlate'],
    align: 'center',
  },
  {
    title: '所属机构',
    dataIndex: ['agency', 'name'],
    align: 'center',
  },
  {
    title: '工作状态',
    dataIndex: 'workStatus',
    align: 'center',
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 300,
    customCell: (record) => record, // ? 设置单元格属性
  },
])

// 表格数据
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}
const getData = () => {}
// 查看回单 - 抽屉组件实例
const drawerRef = ref()

const open = ref(false)
const newModalOpen = ref(false)

const showModal = () => {
  open.value = true
}

const handleOk = () => {
  open.value = false
  newModalOpen.value = true
}
// const onOk = () => {
//   open.value = true
// }
</script>

<template>
  <ResultTable
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
  >
    <!-- 具名作用域插槽 -->
    <template #bodyCell="{ column, text }">
      <!-- 车辆状态 -->
      <template v-if="column.dataIndex === 'workStatus'">
        <div class="table-column-status" :class="text ? 'can-use' : 'stop-use'">
          {{ text ? '上班' : '休息' }}
        </div>
      </template>
      <!-- 操作 -->
      <template v-if="column.key === 'operation'">
        <a-button size="small" type="link" @click="drawerRef.open(text.userId)">查看详情</a-button>
        <a-divider type="vertical" />
        <a-button size="small" type="link" @click="showModal">配置车辆</a-button>
        <!-- 弹框 -->
        <a-modal style="width: 460px" v-model:open="open" title="车辆配置" @ok="handleOk">
          <p>配置车辆需要满足以下条件</p>
          <p><span>1 司机信息已完善</span>　　　　<span>2 司机已配置排班</span></p>
          <p>3 司机绑定车辆未在启用状态</p>
        </a-modal>
        <a-modal
          v-model:open="newModalOpen"
          title="配置车辆"
          :style="{ width: '580px' }"
          :userId="text.userId"
        >
          <TanKuang :userId="text.userId"></TanKuang>
        </a-modal>
      </template>
    </template>
  </ResultTable>
  <!-- 详情抽屉 -->
  <DetailDrawer ref="drawerRef" @close="getData()" />
</template>
<style scoped>
.el-table__fixed-right-patch {
  position: absolute;
  width: 0px;
  height: 48px;
  top: -1px;
  right: 0;
  background-color: #fff;
}
</style>
